<template>
  <!-- nav 导航 -->
  <div class="nav-wrap">
    <!-- 样式1 -->
    <graphic-navigation-style1  v-if="ruleFormLocal.rubikCubelistStyle == 0"></graphic-navigation-style1>
    <graphic-navigation-style2 v-if="ruleFormLocal.rubikCubelistStyle == 1"></graphic-navigation-style2>
    <!-- 样式2 -->
    <option-right v-if="dateFactory.activeBorder">
      <div class="option-wrap">
        <el-form :model="ruleFormLocal" label-width="100px">
          <div class="edit-componet-title">
            导航
          </div>
          <el-form-item label="导航样式" prop="styleTypeTitle">
            <el-radio-group v-model="ruleFormLocal.rubikCubelistStyle">
              <el-radio :label="0">样式1</el-radio>
              <el-radio :label="1">样式2</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </option-right>
  </div>

</template>

<script>
import GraphicNavigationStyle1 from './GraphicNavigationStyle1';
import GraphicNavigationStyle2 from './GraphicNavigationStyle2';
export default {
  name: 'GraphicNavigation',
  props: {
    dateFactory: Object,
    index: Number,
    diyData: Array,
  },
  data() {
    return {
      ruleFormLocal:this.dateFactory.ruleForm,
      navDate: [
        {title: 'fsfs'},
        {title: 'fsfs'},
      ],
    }
  },
  computed: {
    
  },
  components: {
    GraphicNavigationStyle1,
    GraphicNavigationStyle2
  },
   watch: {
    ruleFormLocal: {
      handler: function (newValue) {
        console.log(newValue, 'newValuenewValuenewValue')
        this.diyData[this.index].ruleForm = newValue
        this.$EventBus.$emit('diyFactory', this.diyData)
      },
      deep: true,
    }
  },
  mounted() {
    
  },
  methods: {

  },
}
</script>

<style lang="less" scoped>
  // nav导航
  .nav-wrap {
    background: #fff;
    .swiper-nav {
      width: 358px;
      margin: 0 auto;
      height: 120px;
      .pagation {
        display: flex;
        align-items: center;
        justify-content: center;
        .dot {
          width: 6px;
          height: 3px;
          border-radius: 5px;
          background-color: #d7e0ff;
          margin-right: 1px;
          &.active {
            background-color: #2a55f3;
          }
        }
      }
      .swiper {
        width: 100%;
        height: 100px;
        .el-carousel__item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .swiper-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img {
              width: 72px;
              height: 72px;
            }
            span {
              color: #000;
              font-size: 12px;
            }
          }
          
        }
      }
      
    }
  }
   .option-wrap {
    .el-form  {
      .edit-componet-title {
        margin-bottom: 15px;
        padding-bottom: 7px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 14px;
      }
      .el-form-item {
        .side {
          display: flex;
          align-items: center;
          align-items: center;
          .el-slider {
            flex: 1;
          }
          &> span {
            margin-left: 14px;
          }
        }
      }
    }
  }
  
</style>